<script lang="ts" setup>
import type { Rule } from 'ant-design-vue/es/form';

import type { HandCardsApi } from '#/api/spa/handcards';

import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  DatePicker,
  Form,
  Input,
  message,
  Radio,
  RadioGroup,
  Select,
} from 'ant-design-vue';

import {
  createHandCards,
  getHandCards,
  updateHandCards,
} from '#/api/spa/handcards';
import { $t } from '#/locales';

const emit = defineEmits(['success']);

const formRef = ref();
const formData = ref<Partial<HandCardsApi.HandCards>>({
  id: undefined,
  cardNumber: undefined,
  cardType: undefined,
  status: undefined,
  teamId: undefined,
  roomNumber: undefined,
  openTime: undefined,
  totalConsumption: undefined,
  remarks: undefined,
  icon: undefined,
});
const rules: Record<string, Rule[]> = {
  cardNumber: [
    { required: true, message: '手牌号码不能为空', trigger: 'blur' },
  ],
  cardType: [
    { required: true, message: '手牌类型不能为空', trigger: 'change' },
  ],
  status: [{ required: true, message: '手牌状态不能为空', trigger: 'blur' }],
};
const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['手牌'])
    : $t('ui.actionTitle.create', ['手牌']);
});

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    cardNumber: undefined,
    cardType: undefined,
    status: undefined,
    teamId: undefined,
    roomNumber: undefined,
    openTime: undefined,
    totalConsumption: undefined,
    remarks: undefined,
    icon: undefined,
  };
  formRef.value?.resetFields();
};

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    await formRef.value?.validate();
    modalApi.lock();
    // 提交表单
    const data = formData.value as HandCardsApi.HandCards;
    try {
      await (formData.value?.id
        ? updateHandCards(data)
        : createHandCards(data));
      // 关闭并提示
      await modalApi.close();
      emit('success');
      message.success({
        content: $t('ui.actionMessage.operationSuccess'),
        key: 'action_process_msg',
      });
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      resetForm();
      return;
    }
    // 加载数据
    let data = modalApi.getData<HandCardsApi.HandCards>();
    if (!data) {
      return;
    }
    if (data.id) {
      modalApi.lock();
      try {
        data = await getHandCards(data.id);
      } finally {
        modalApi.unlock();
      }
    }
    formData.value = data;
  },
});
</script>

<template>
  <Modal :title="getTitle">
    <Form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 18 }"
    >
      <Form.Item label="手牌号码" name="cardNumber">
        <Input
          v-model:value="formData.cardNumber"
          placeholder="请输入手牌号码"
        />
      </Form.Item>
      <Form.Item label="手牌类型" name="cardType">
        <Select v-model:value="formData.cardType" placeholder="请选择手牌类型">
          <Select.Option label="请选择字典生成" value="" />
        </Select>
      </Form.Item>
      <Form.Item label="手牌状态" name="status">
        <RadioGroup v-model:value="formData.status">
          <Radio value="1">请选择字典生成</Radio>
        </RadioGroup>
      </Form.Item>
      <Form.Item label="团队ID" name="teamId">
        <Input v-model:value="formData.teamId" placeholder="请输入团队ID" />
      </Form.Item>
      <Form.Item label="房间号" name="roomNumber">
        <Input v-model:value="formData.roomNumber" placeholder="请输入房间号" />
      </Form.Item>
      <Form.Item label="开牌时间" name="openTime">
        <DatePicker
          v-model:value="formData.openTime"
          value-format="x"
          placeholder="选择开牌时间"
        />
      </Form.Item>
      <Form.Item label="总消费金额" name="totalConsumption">
        <Input
          v-model:value="formData.totalConsumption"
          placeholder="请输入总消费金额"
        />
      </Form.Item>
      <Form.Item label="备注信息" name="remarks">
        <Input v-model:value="formData.remarks" placeholder="请输入备注信息" />
      </Form.Item>
      <Form.Item label="图标标识" name="icon">
        <Input v-model:value="formData.icon" placeholder="请输入图标标识" />
      </Form.Item>
    </Form>
  </Modal>
</template>
